<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>4. 理解小程序的安全与管控 | 被删的前端游乐场</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="Just playing around">
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.1e2670bf.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.38d016d1.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.e3f029cb.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/175.25d0383c.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link router-link-active">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link router-link-active">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-2b653b36><span class="stand" data-v-2b653b36></span> <div class="cat" data-v-2b653b36><div class="body" data-v-2b653b36></div> <div class="head" data-v-2b653b36><div class="ear" data-v-2b653b36></div> <div class="ear" data-v-2b653b36></div></div> <div class="face" data-v-2b653b36><div class="nose" data-v-2b653b36></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div></div> <div class="tail-container" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>小程序原理</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/wxapp/wxapp-principle/1-wxapp-generate.html" class="sidebar-link">1. 小程序的诞生</a></li><li><a href="/front-end-playground/wxapp/wxapp-principle/2-wxapp-technology-architecture.html" class="sidebar-link">2. 小程序的底层框架</a></li><li><a href="/front-end-playground/wxapp/wxapp-principle/3-wxapp-set-data.html" class="sidebar-link">3. 解剖小程序的setData</a></li><li><a href="/front-end-playground/wxapp/wxapp-principle/4-wxapp-manage-and-security.html" aria-current="page" class="active sidebar-link">4. 理解小程序的安全与管控</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-principle/4-wxapp-manage-and-security.html#双线程到底解决了什么" class="sidebar-link">双线程到底解决了什么</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-principle/4-wxapp-manage-and-security.html#审核机制的管控" class="sidebar-link">审核机制的管控</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-principle/4-wxapp-manage-and-security.html#安全的登录机制" class="sidebar-link">安全的登录机制</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/wxapp/wxapp-principle/4-wxapp-manage-and-security.html#参考" class="sidebar-link">参考</a></li></ul></li><li><a href="/front-end-playground/wxapp/wxapp-principle/5-wxapp-basic-lib.html" class="sidebar-link">5. 关于小程序的基础库</a></li><li><a href="/front-end-playground/wxapp/wxapp-principle/6-wxapp-page-and-navigate.html" class="sidebar-link">6. 小程序页面管理与跳转</a></li><li><a href="/front-end-playground/wxapp/wxapp-principle/7-wxapp-component.html" class="sidebar-link">7. 小程序自定义组件</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>小程序开发技巧</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>小程序开发月刊</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>作为一个平台，管控和安全是很有必要性的。虽然说这些是开发自己需要进行防范的，但是平台如果能解决，也算是皆大欢喜了。</p> <h2 id="双线程到底解决了什么"><a href="#双线程到底解决了什么" class="header-anchor">#</a> 双线程到底解决了什么</h2> <p>先给小程序团队的双线程设计鼓个掌，关于双线程大家也可以回顾下<a href="/front-end-playground/wxapp/wxapp-principle/2-wxapp-technology-architecture.html">《小程序的底层框架》</a>。</p> <h3 id="h5-的隐患"><a href="#h5-的隐患" class="header-anchor">#</a> H5 的隐患</h3> <p>要知道，Web 技术是非常开放灵活的，开发者可以利用 JavaScript 脚本随意地操作 DOM，这是会带来以下的问题：</p> <h4 id="随意地跳转网页-改变界面上的任意内容"><a href="#随意地跳转网页-改变界面上的任意内容" class="header-anchor">#</a> 随意地跳转网页，改变界面上的任意内容</h4> <p>开发者可以利用 JavaScript 脚本随意地跳转网页，或是改变界面上的任意内容。当然，恶意攻击者也能利用这种便利。</p> <h4 id="获取页面数据"><a href="#获取页面数据" class="header-anchor">#</a> 获取页面数据</h4> <p>小程序也提供可一种可以展示敏感数据的组件，<code>&lt;open-data&gt;</code>能展示包括用户昵称、头像、性别、地理位置等信息（无需用户授权）。
如果开发者可以操作 DOM，意味着他们可以随意拿到用户的敏感信息。</p> <h4 id="常见的前端漏洞"><a href="#常见的前端漏洞" class="header-anchor">#</a> 常见的前端漏洞</h4> <p>开发者们普遍重视的安全漏洞，在前端常见的有 XSS 和 CSRF，XSS 是通过注入 JavaScript 脚本的方式来达到特定目的，而 CSRF 则是利用了 cookie。<br>
XSS 在双线程的设计中就被过滤了，而 CSRF 会在后面讲到。</p> <h3 id="难以实现的管控"><a href="#难以实现的管控" class="header-anchor">#</a> 难以实现的管控</h3> <p>为了解决管控与安全问题，小程序需要禁用掉：</p> <ul><li>危险的 HTML 标签或者相关属性，如外跳 url 的 a 标签</li> <li>危险的 API，如操作界面的 API、动态运行脚本的 API</li></ul> <p>如果要一个一个禁止，JavaScript 的灵活性以及浏览器接口的丰富性，会导致很容易遗漏一些危险的接口。并且浏览器内核在不断更新，或许下一版本会新增一个可能会在这套体系下产生漏洞的接口，无法完全避免。</p> <h3 id="安全的逻辑层"><a href="#安全的逻辑层" class="header-anchor">#</a> 安全的逻辑层</h3> <p>要怎么彻底解决这些问题呢？给大家点提示：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/sandbox.png" alt="image"></p> <p>没错，就是沙箱环境。通过提供一个纯 JavaScript 的解释执行环境，这个环境没有浏览器相关接口，当然也不用担心操作 DOM、跳转等问题了。在 iOS 下是用内置的 JavaScriptCore 框架，在安卓下是 JsCore 环境（旧版是腾讯 x5 内核提供，新版是 v8 提供）。</p> <p>一起来回顾下小程序的双线程长什么样子：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1537414306%281%29.png" alt="image"></p> <p>客户端系统有 JavaScript 的解释引擎，则可以创建一个单独的线程去执行 JavaScript，这个环境下只执行有关小程序业务逻辑的代码。界面渲染相关的任务呢，就丢到 webview 线程里面，通过逻辑层代码去控制渲染哪些界面。</p> <p><strong>把开发者的 JS 逻辑代码放到单独的线程去运行，因为不在 Webview 线程里，所以这个环境没有 Webview 任何接口，自然的开发者就没法直接操作 DOM，也就没法动态去更改界面或者抓取页面数据。</strong></p> <p>同时小程序不支持动态载入脚本，XSS 漏洞自然也无缝可钻。</p> <h2 id="审核机制的管控"><a href="#审核机制的管控" class="header-anchor">#</a> 审核机制的管控</h2> <p>审核机制，故事要从公众号讲起了。</p> <h3 id="webview-的飞速发展"><a href="#webview-的飞速发展" class="header-anchor">#</a> WebView 的飞速发展</h3> <p>当年随着公众号的出现和繁荣，WebView 的使用频率也越来越高。不少的企业或是小商家、外包公司开始做 H5 页面，各式各样的 H5 活动页、小商城、小测试、小游戏满天飞。</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1537444454%281%29.jpg" alt="image"></p> <p>当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。</p> <p>2015 年初，微信发布了一整套网页开发工具包，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个 API，称之为 JS-SDK。</p> <p>到这个时候，web 开发者可以使用到微信的原生能力，去完成一些之前做不到或者很难做到的事情。</p> <h3 id="难管控的-jssdk"><a href="#难管控的-jssdk" class="header-anchor">#</a> 难管控的 JSSDK</h3> <p>由于使用 WebView 和 JSSDK 的人越来越多，微信上越来越多干坏事的人，有人做假红包，有人诱导分享，有伪造一些官方活动，他们会利用 JSSDK 的分享能力变相的去裂变分享到各个群或者朋友圈。</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1537444835.jpg" alt="image"></p> <p>由于 JSSDK 是根据域名来赋予 api 权限的，运营人员封了一个域名后，他们立马用别的域名又继续做坏，注册一个新的域名的成本是很低的。</p> <h3 id="小程序的审核机制"><a href="#小程序的审核机制" class="header-anchor">#</a> 小程序的审核机制</h3> <p>为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过审核的。经过审核的小程序才能对外发布，同时在出现问题时，小程序会被下架停用。</p> <p>另外，每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名与进行网络通信，包括普通 HTTPS 请求、上传文件、下载文件和 WebSocket 通信，参考<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html" target="_blank" rel="noopener noreferrer">框架-网络<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。这些通讯域名，也都必须要求通过备案。</p> <p>同时，小程序必须使用 HTTPS 发起网络请求。请求时系统会对服务器域名使用的 HTTPS 证书进行校验，如果校验失败，则请求不能成功发起。</p> <p>这些种种的限制和管理模式，都进一步保障了用户的数据和隐私安全。</p> <h2 id="安全的登录机制"><a href="#安全的登录机制" class="header-anchor">#</a> 安全的登录机制</h2> <p>想必在座的各位前端开发者，都清楚 CSRF 安全漏洞。</p> <h3 id="危险的-cookie"><a href="#危险的-cookie" class="header-anchor">#</a> 危险的 cookie</h3> <p>跨站请求攻击（CSRF），简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去运行。</p> <p>这利用了 web 中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。通常的罪魁祸首则是浏览器的 cookie 登录态。</p> <p>除了检查 Referer 字段来防范，更有效的一种方式是使用 token。小程序也是这么做的。</p> <h3 id="小程序登录"><a href="#小程序登录" class="header-anchor">#</a> 小程序登录</h3> <p>小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。参考官方时序图：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/%E6%8E%88%E6%9D%83%E6%97%B6%E5%BA%8F%E5%9B%BE.jpg" alt="image"></p> <p>在小程序中调用<code>wx.login()</code>，能拿到一个<code>code</code>作为用户登录凭证（有效期五分钟）。在开发者服务器后台，开发者可使用<code>code</code>换取<code>openid</code>和<code>session_key</code>等信息（<code>code</code>只能使用一次）。</p> <h3 id="可靠的-code"><a href="#可靠的-code" class="header-anchor">#</a> 可靠的 code</h3> <p>假设现在有个接口，请求 https://test.com/getUserInfo?id=1 拉取到微信用户 id 为 1 在我们业务侧的个人信息，那么黑客就可以通过遍历所有的 id，把整个业务侧的个人信息数据全部拉走，会给业务带来很大的安全风险。</p> <p>由于<code>code</code> 5 分钟后会过期，如果黑客要冒充一个用户的话，那他就必须在 5 分钟内穷举所有的身份证 id，然后去开发者服务器换取真实的用户身份。而<code>code</code>在成功换取一次信息之后也会立即失效，即便凭证<code>code</code>生成时间还没过期。显然，黑客要付出非常大的成本才能获取到一个用户信息，同时，开发者服务器也可以通过一些技术手段检测到 5 分钟内频繁从某个 ip 发送过来的登录请求，从而拒绝掉这些请求。</p> <h3 id="需要保护的-appsecret"><a href="#需要保护的-appsecret" class="header-anchor">#</a> 需要保护的 AppSecret</h3> <p>开发者的后台就拿到了前边<code>wx.login()</code>所生成的微信登录凭证<code>code</code>，此时就可以拿这个<code>code</code>到微信服务器换取微信用户身份。微信服务器为了确保拿<code>code</code>过来换取身份信息的人就是刚刚对应的小程序开发者，到微信服务器的请求要同时带上<code>AppId</code>和<code>AppSecret</code>。</p> <p><code>AppId</code>和<code>AppSecret</code>是微信鉴别开发者身份的重要信息，<code>AppId</code>是公开信息，泄露 AppId 不会带来安全风险，但是<code>AppSecret</code>是开发者的隐私数据不应该泄露，开发者需要好好保护。</p> <h2 id="参考"><a href="#参考" class="header-anchor">#</a> 参考</h2> <ul><li><a href="https://developers.weixin.qq.com/ebook?action=get_post_info&amp;token=935589521&amp;volumn=1&amp;lang=zh_CN&amp;book=miniprogram&amp;docid=000cc48f96c5989b0086ddc7e56c0a" target="_blank" rel="noopener noreferrer">《小程序开发指南》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h1 id="结束语"><a href="#结束语" class="header-anchor">#</a> 结束语</h1> <p>作为一个开放的平台，小程序在提供微信加持、体验加持的能力给开发者使用的同时，也替用户和开发者做了很多安全性上的保障。<br>
或许有人说，这是牺牲了开发者的开放性换来的，而我认为这样才是个有灵魂的平台。</p></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/wxapp/wxapp-principle/4-wxapp-manage-and-security.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/wxapp/wxapp-principle/3-wxapp-set-data.html" class="prev">
          3. 解剖小程序的setData
        </a></span> <span class="next"><a href="/front-end-playground/wxapp/wxapp-principle/5-wxapp-basic-lib.html">
          5. 关于小程序的基础库
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-4387" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><span class="el-popover__reference-wrapper"><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty1.svg);"></div></span></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.1e2670bf.js" defer></script><script src="/front-end-playground/assets/js/2.38d016d1.js" defer></script><script src="/front-end-playground/assets/js/3.e3f029cb.js" defer></script><script src="/front-end-playground/assets/js/175.25d0383c.js" defer></script>
  </body>
</html>
